<template>
	<div class="main">
		<el-card shadow="never" class="card">
			<div slot="header" class="clearfix">
				<span>分类管理</span>

			</div>
		</el-card>
		<el-card shadow="never" class="card">
			<div slot="header" class="clearfix">
				<span>乐居分类</span>

			</div>
			<div class="card-box">
				<el-card shadow="hover" style="width: 240px; height: 400px;" class="card-item">
					<div slot="header" class="clearfix">
						<span>创意</span>
					<img src="../../../../public/img/1623998117(1).jpg" alt="" style="width:200px ;height:400px ;">
					</div>
				</el-card>
				<el-card shadow="hover" style="width: 240px; height: 400px;" class="card-item">
					<div slot="header" class="clearfix">
						<span>风格</span>
					<img src="../../../../public/img/1623987537(1).jpg" alt="" style="width:200px ;height:400px ;">
					</div>
				</el-card>
				<el-card shadow="hover" style="width: 240px; height: 400px;" class="card-item">
					<div slot="header" class="clearfix">
						<span>饰品</span>
					<img src="../../../../public/img/1623987850(1).jpg" alt="" style="width:200px ;height:400px ;">
					</div>
				</el-card>
				<el-card shadow="hover" style="width: 240px; height: 400px;" class="card-item">
					<div slot="header" class="clearfix">
						<span>灯具</span>
					<img src="../../../../public/img/1623998252.jpg" alt=""style="width:200px ;height:400px ;">
					</div>
				</el-card>
			</div>
<div class="kind">全部分类</div>
				<el-table
				  :data="categoryList"
				  style="width: 100%;margin-bottom: 20px;"
				  row-key="id"
				  border
				  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
				>
				<el-table-column
				  prop="name"
				  label="菜单名称"
				  width="180"
				/>
			<el-table-column
			  label="icon"
			  align="center"
			  width="180"
			>
			  <template slot-scope="scope">
			    <img :src="scope.row.icon" height="100px" width="100px">
			  </template>
			</el-table-column>
				<el-table-column
				  prop="name"
				  label="分类名字"
				  width="180"
				/>
				<el-table-column
				  prop="sort"
				  label="排序"
				  width="50"
				/>
				<el-table-column
				  prop="sort"
				  label="显示状态"
				  width="180"
				>
				 <template slot-scope="scope">
					 <span >{{ scope.row.showStatus===1?'显示':'不显示' }}</span>
					 </template>
				</el-table-column>
				<el-table-column
				  prop="navStatus"
				  label="导航栏展示"
				  width="180"
				>
				 <template slot-scope="scope">
					 <span >{{ scope.row.navStatus===1?'展示':'不展示' }}</span>
					 </template>
				</el-table-column>
				<el-table-column
				  prop="description"
				  label="描述"
				  width="120"
				/>
				<el-table-column
				  prop="createTime"
				  label="创建时间"
				  width="180"
				/>
				 </el-table>

		
		</el-card>
	</div>
</template>

<script>
	import{
		getAllCategory
	}from "@/api/commodity/classify/index.js"
	export default{
		data(){
			return{
				 categoryList: [],
				  lejuList: []
			}
		},
		methods:{
			
		},
		created() {
			getAllCategory().then(res=>{
				console.log(res)
				if(res.success){
					var arr = []
					res.data.items.forEach(ele=>{
						ele.category.children =ele.children
						delete ele.children
						arr.push(ele.category)
					})
					this.categoryList = arr
					this.categoryList.forEach(ele=>{
						if(ele.name ==='乐居'){
							this.lejuList = ele.children
							return
						}
					})
				}
			})
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main {
		
		.card {
			margin: 30px;
			.kind{
				
				margin-top: 20px;
			}
		}

		.card-box {
			margin-right: 20px;
			display: flex;

			.card-item {
				margin-left: 20px;
				.clearfix{
					text-align: center;
				}
			}
		}
	}
</style>
